<template>
    <div class="home">
        <el-container class="home-container">
            <el-aside width="200px" class="el-aside">
                <!-- 引入侧边栏组件  传入参数 -->
                <Aside :isCollapse="isCollapse" :courseHandler="courseHandler" />
            </el-aside>
            <el-container class="el-container">
                <el-header class="el-header">
                    <!-- 引入头部组件  传入参数与方法 -->
                    <Header :isCollapse="isCollapse" :handleCollapse="handleCollapse" />
                </el-header>
                <el-main class="el-main">
                    <Main />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>
import router from '../routers/index'
// 引入三个组件
import Header from '../components/Header.vue'
import Aside from '../components/Aside.vue'
import Main from '../components/Main.vue'
import { onMounted,ref } from 'vue';
// 引入axios的文件
import request from '../utils/request'


const goto = (path) => {
    console.log(path)
    router.push(path) // 跳转  等同与 <router-link :to="path"></router-link>
}
// 声明一个变量用于控制侧边栏的折叠
const isCollapse = ref(false)
// 控制侧边栏的折叠方法(开关键)
const handleCollapse = () => {
    console.log(isCollapse.value)
    isCollapse.value = !isCollapse.value
}

</script>
<style lang="less" scoped>
.el-aside {
    width: auto;
    background-color: aqua;
    overflow: hidden;
}
.el-container{
    height: 100vh;
}
.el-header {
    background-color: #6e9cd9;
}
.el-main{
    background-color: snow;
}
</style>